<div class="modal-content" *ngIf="applications">
  <div class="modal-header">
    <h4 *ngIf="applications.length == 1" class="modal-title pull-left">Confirm Unregister Application</h4>
    <h4 *ngIf="applications.length > 1" class="modal-title pull-left">Confirm Unregister Applications</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" *ngIf="applications.length == 1">
    <p>This action will unregister and delete application
      <u><strong>{{ applications[0].name }}</strong></u>
      of type <app-type [application]="applications[0]"></app-type>.
      Are you sure?</p>
  </div>
  <div class="modal-body" *ngIf="applications.length > 1">
    <p>
      This action will unregister and delete the <u><strong>{{ applications.length }}
      application{{ applications.length > 1 ? 's' : '' }}</strong></u> listed below.<br />Are you sure?
    </p>
    <br/>
    <table class="table table-striped">
      <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of applications">
        <td>{{ item.name }}</td>
        <td><app-type [application]="item"></app-type></td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="close()">Cancel</button>
    <button name="app-unregister" type="button" class="btn btn-primary" (click)="unregister()">
      <span *ngIf="applications.length == 1">Unregister the application</span>
      <span *ngIf="applications.length > 1">Unregister the applications</span>
    </button>
  </div>
</div>
